<template>
        <div class="comment-list">
        <div
          class="comment-item"
          v-for="(item ,index) in comment"
          :key="index"
        >
          <div class="top">
            <img :src="defaultImg" alt="" />
            <div class="name">{{ item.username }}</div>
            <van-rate
              :size="16"
              allow-half
              :value="item.rank / 2"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
            />
          </div>
          <div class="content">
            {{ item.content }}
          </div>
          <div class="time">
             {{ formatDate(item.comment_time) }}
          </div>
        </div>
      </div>
</template>
<script>
import defaultImg from '@/assets/default-avatar.png'
export default {
  name: 'CommentList',
  props: {
    comment: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      defaultImg // 默认头像
    }
  },
  methods: {
    formatDate (createtime) {
      const date = new Date(createtime)
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      //   const hour = date.getHours() // 获取小时
      //   const minute = date.getMinutes() // 获取分钟
      //   const second = date.getSeconds() // 获取秒数
      return `${year}年${month}月${day}号`
    }
  }
}
</script>

<style lang="less" scoped>
 .comment-item {
    font-size: 16px;
    line-height: 30px;
    .top {
      height: 30px;
      display: flex;
      align-items: center;
      margin-top: 20px;
      img {
        width: 20px;
        height: 20px;
      }
      .name {
        margin: 0 10px;
      }
    }
    .time {
      color: #999;
    }
  }

</style>
